<template>
  <el-dialog :title="$t('table.add')" width="600px" :visible="true" @close="onClose" top="20vh">
    <el-form :model="form" :rules="rules" ref="dialog-form" label-width="85px" size="small">
      <el-form-item :label="$t('user.username')" prop="username">
        <el-input :value="form.username" readonly></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.password')" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.confirmPassword')" prop="confirmPassword">
        <el-input v-model="form.confirmPassword" type="password"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">{{$t('dialog.cancel')}}</el-button>
      <el-button type="primary" @click="save">{{$t('dialog.save')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Vue from 'vue'
  import { Loading } from 'element-ui'
  import { vsprintf } from 'sprintf-js/dist/sprintf.min.js'
  import { fetchPost } from '@/api/restful'

  export default {
    data() {
      let selectedRow = this.$parent.selectedRow;
      const recheckPassword = (rule, value, callback) => {
        if(value==null || value == ''){
          callback(new Error(this.$t('rules.message.required')))
        }
        else if(this.form.password == value){
          callback()
        }
        else{
          callback(new Error(this.$t('rules.message.rechekPasswordError')))
        }
      };
      return {
        form: {
          id: selectedRow.id,
          username: selectedRow.username
        },
        rules:{
          password:[
            { required: true, message:this.$t('rules.message.required'), trigger: 'blur' },
            { min: 6, message: vsprintf(this.$t('rules.message.minLen'), 6), trigger: 'blur' },
            { max: 20, message: vsprintf(this.$t('rules.message.maxLen'), 20), trigger: 'blur' }
          ],
          confirmPassword:[
            { min: 6, message: vsprintf(this.$t('rules.message.minLen'), 6), trigger: 'blur' },
            { required: true, trigger: 'blur', validator: recheckPassword}
          ]
        }
      };
    },
    methods: {
      save(){
        let loading = Loading.service({ target: this.$el.childNodes[0] });
        this.$refs['dialog-form'].validate((valid) => {
          if(valid){
            fetchPost(this.$parent.baseUrl+'/resetPassword', this.form).then(response => {
              if(response.data.success){
                this.$notify.success({
                  title: this.$t('notify.title.success'),
                  message: response.data.msg
                });
                this.$router.push("/");
              }
              else{
                this.$notify.warning({
                  title: this.$t('notify.title.fail'),
                  message: response.data.msg
                });
                loading.close();
              }
            }).catch(() => {
              loading.close();
            })
          }
          else{
            loading.close();
          }
        })
      },
      onClose(){
        this.$router.push("/");
      },
    }
  };
</script>
